<style lang="scss">
  @import '~styles/common';
  html {
    width: 100%;
    height: 100%;
    font-size: 10px;
  } 
  body {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    position: relative;
    background: #dfe3e8;
    font-size: 1.6rem;
  }
  .primary {
    color: $color-primary;
  }
  .invite {
    height: 100%;
    background: $color-primary;
    margin: 8px;
    border-radius: 2*$border-radius-base;
    .header {
      position: relative;
      background: $color-primary;
      border-bottom: 1px dashed #ccc;
      &:before,
      &:after {
        content: '';
        background: #dfe3e8;
        display: block;
        position: absolute;
        bottom: -9px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
      }
      &:before {
        left: -9px;
      }
      &:after {
        right: -9px;
      }
      .top {
        font-size: 2rem;
        color: #fff;
        height:40px;
        line-height: 40px;
        padding-left: 20px;
      }
      .avatar {
        text-align: center;
        padding: 2rem 1.5rem;
        background:#fff;
      }
    }
    .input {
      input:-webkit-autofill {
        -webkit-box-shadow: inset 0 0 0px 9999px #f8f8f8;
      }
      padding: 2rem 1.5rem;
      background:#fff;
      .form-group {
        margin: 0 auto 1rem auto;
      }
      .form-control {
        width: 90%;
        border-radius: 2.3rem;
        box-shadow: none;
        padding: 1.4rem;
        outline: none;
        background: #f8f8f8;
        text-align: left;
        border: 1px solid #ccc;
      }
      .input-group {
        @include clearfix;
        .form-control {
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
          width: 49%;
          float: left;
        }
        .input-addone {
            float: left;
            text-align: left;
            width: 40%;
            height: 4.6rem;
            border-top-right-radius: 2.3rem;
            border-bottom-right-radius: 2.3rem;
            border: 1px solid #ccc;
            overflow: hidden;
            &.button {
              background-color: #fff;
              height: inherit;
              padding: 1.4rem;
              text-align: center;
              &:hover {
                border-color: $color-primary;
                color: $color-primary;
                cursor: pointer;
              }
              &.disabled:hover {
                cursor:not-allowed;
                border-color: #ccc;
                color: #ccc;
              }
            }
            img {
              cursor: pointer;
              height: 4.6rem;
            }
        }
      }
      button.form-control {
        background: $color-primary;
        color: #fff;
        margin-top: 2rem;
        text-align:center;
        width:60%;
        &:hover {
          cursor: pointer;
        }
      }
    }
    .applyed {
      padding: 2rem 1rem;
      background-color: #fff;
      .icon {
        font-size: 3.6rem;
        margin: 2rem auto;
      }
    }
  }
  @media (min-width: $screen-sm-min) {
    body {
      background-image: linear-gradient(to bottom, #558b2f, #81c784, #dcedc8);
    }
    .invite {
      .header {
        &:before,
        &:after {
          background: #6ead5e;
        }
      }
      position: relative;
      width: 400px;
      height: auto;
      padding: 0;
      margin: 0 auto;
      overflow: hidden;
      transform: translateY(100px);
    }
  }
</style>
<template>
  <div class="invite">
    <section>
      <header class="header">
        <div class="top">{{inviteInfo.productName}}</div>
        <div class="avatar text-center">
          <p>您好，诚挚地邀请您加入</p>
          <p class="primary">{{inviteInfo.cmpName}}</p>
        </div>
        <div class="group"></div>
      </header>
    </section>
    <section class="input text-center" v-show="!state.isApply">
      <form class="form">
        <div class="form-group">
          <input type="text" class="form-control" v-model="applyInfo.account" placeholder="请输入您的手机号或邮箱" name="account"/>
        </div>
        <div class="form-group">
          <input type="text" class="form-control" v-model="applyInfo.name" placeholder="请输入您的姓名" name="name"/>
        </div>
        <div class="form-group input-group">
          <input type="text" class="form-control" v-model="applyInfo.imgCaptcha" placeholder="请输入验证码" name="imgCaptcha"/>
          <div class="input-addone">
            <check-img ></check-img>
          </div>
        </div>
        <div class="form-group input-group">
          <input type="text" class="form-control" v-model="applyInfo.dyCaptcha" placeholder="请输入动态验证码" name="dyCaptcha"/>
          <button class="input-addone button" 
            @click.prevent="sendCaptcha"
            v-bind:disabled="state.timeId"
            :class="{'disabled': state.timeId}"
            >
            <span v-show="!state.timeId">发送验证码</span>
            <span v-show="state.timeId">{{state.timeCount+'s后重新发送'}}</span>
          </button>
        </div>
        <div class="form-group">
          <button class="form-control" type="button" @click.prevent="applyCmp">加入公司</button>
        </div>
      </form>
    </section>
    <section v-show="state.isApply" class="applyed text-center">
      <div>
        <div class="icon primary">
          <span class="zk-icon-check"></span>
        </div>
        <p> 你的申请已提交，正在等待管理员审核 </p>
      </div>
    </section>
  </div>
</template>
<script>
/**
 * @author: guocailee
 */
import urlParams from 'src/utils/urlParams'
import * as validator from 'theme/utils/validate'
import * as invite from 'src/api/invite'
import * as check from 'src/api/check'
import checkImg from './checkImg.vue'
export default {
  name: 'invite',
  data() {
    return {
      inviteCode: '',
      productCode: '',
      state: {
        timeId: null,
        timeCount: 60,
        isApply: false
      },
      inviteInfo: {
        cmpName: '',
        productName: ''
      },
      applyInfo: {
        account: '',
        imgCaptcha: '',
        dyCaptcha: '',
        name: ''
      }
    }
  },
  methods: {
    applyCmp() {
      var self = this
      if (!validator.isEmail(self.applyInfo.account) && !validator.isMobile(self.applyInfo.account)) {
        self.$message.error('请输入正确的手机号或邮箱')
        return
      }
      if (self.applyInfo.name === '') {
        self.$message.error('请输入姓名')
        return
      }
      check.verifyCaptcha({
        account: self.applyInfo.account,
        captcha: self.applyInfo.dyCaptcha
      }).then(data => {
        return invite.applyCmp({
          inviteJoinCode: self.inviteCode,
          account: self.applyInfo.account,
          name: self.applyInfo.name
        })
      }).then(data => { self.state.isApply = true })
        .catch(data => this.$message.error(data))
    },
    sendCaptcha() {
      var self = this
      if (!validator.isEmail(this.applyInfo.account) && !validator.isMobile(this.applyInfo.account)) {
        this.$message.error('请输入正确的手机号或邮箱')
        return
      }
      check.verifyImgCode({
        captcha: self.applyInfo.imgCaptcha
      }).then(data => {
        self.timeStart()
        return check.sendCaptcha({
          account: self.applyInfo.account,
          inviteJoinCode: self.inviteCode
        })
      }).then(data => this.$message.success(`成功向${self.applyInfo.account}发送验证码，请查收`))
      .catch(data => self.$message.error(data))
    },
    timeStart () {
      var self = this
      self.state.timeCount = 60
      if (self.state.timeId) {
        return
      }
      self.state.timeId = setInterval(() => {
        self.state.timeCount --
        if (self.state.timeCount === 0) {
          clearInterval(self.state.timeId)
          self.state.timeCount = null
          self.state.timeId = null
        }
      }, 1000)
    }
  },
  mounted() {
    this.inviteCode = urlParams.code
    this.productCode = urlParams.productCode
    var self = this
    invite.getInviteInfo({
      code: urlParams.code || '',
      productCode: urlParams.productCode || ''
    }).then(data => {
      self.inviteInfo.cmpName = data.body.payload.results.cmpName
      self.inviteInfo.productName = data.body.payload.results.productName
    })
  },
  components: {
    checkImg
  }
}
</script>